<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<pre>

    注意事项

    由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
    当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
    当你修改数组的长度时，例如： vm.items.length = newLength


    为了解决第二类问题，你可以使用 splice：
    example1.items.splice(newLength)
    
</pre>
<div id="app">
    <ul>
        <li v-for="n of list">{{n}}</li>
    </ul>
    <button @click="index">index</button>
    <button @click="fixIndex_1">Vue.set()</button>
    <button @click="fixIndex_2">splice()</button>
    <button @click="length">length</button>
    <button @click="fixLength">fixLength</button>
</div>
</body>
<script src="../../vender/vue@2.4.2.js"></script>
<script>

    var app=new Vue({
        el:'#app',
        data:{
            list:[0,1,2,3,4,5,6,7,8,9]
        },
        methods:{
            index: function () {
                this.list[0]='zero';
            },
            'fixIndex_1': function () {
                Vue.set(this.list,0,'zero');
            },
            'fixIndex_2': function () {
                this.list.splice(1,1,'one');
            },
            length: function () {
                this.list=this.list.concat('a','b','c');
            },
            fixLength: function () {
                this.list.splice(5)
            }
        }
    });

</script>
</html>